<template>
    <Layout>
        <IHeader></IHeader>
        <Content style="background: #fff">
            <Carousel arrow="never" autoplay autoplay-speed="3000" v-model="banner" loop>
                <CarouselItem>
                    <div class="carousel-item">1</div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel-item">2</div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel-item">3</div>
                </CarouselItem>
                <CarouselItem>
                    <div class="carousel-item">4</div>
                </CarouselItem>
            </Carousel>
            <div class="inner-wrp">
                <div class="gutter-wrp">
                    <Row :gutter="16">
                        <Col class="gutter-row" :span="12">
                            <div class="gutter-box"></div>
                        </Col>
                        <Col class="gutter-row" :span="12">
                            <div class="gutter-box"></div>
                        </Col>
                    </Row>
                </div>
            </div>
        </Content>
        <IFooter></IFooter>
    </Layout>
</template>

<script>
    import IHeader from '../components/include/header.vue'
    import IFooter from '../components/include/footer.vue'
    export default {
        name: 'Main',
        components: {
            IHeader,
            IFooter
        },
        data () {
            return {
                banner: 0
            }
        }
    }
</script>
<style scoped>
    .carousel-item {
        text-align: center;
        height: 500px;
        line-height: 500px;
        color: #fff;
        font-size: 20px;
        background: #eee;
    }

    .gutter-wrp {
        margin-top: 30px;
    }

    .gutter-box {
        background: #eee;
        padding: 5px 0;
        height: 300px;
    }
</style>